<template>
  <el-dialog title="插入组织单位" :visible.sync="dialogVisible" :before-close="handleClose" destroy-on-close>
    <div class="wrapper">
      <el-input placeholder="输入关键字进行过滤" clearable v-model="searchKey" size="mini" style="width: 360px">
        <el-button slot="append" icon="el-icon-search" @click.prevent="filterNode"></el-button>
      </el-input>
      <el-tree
        ref="syncTree"
        v-show="syncTreeVisible"
        :node-key="'id'"
        :data="treeData"
        show-checkbox
        check-strictly
        default-expand-all
      >
      </el-tree>
      <el-tree
        ref="asyncTree"
        v-show="!syncTreeVisible"
        :node-key="'id'"
        :load="loadNode"
        lazy
        show-checkbox
        check-strictly
      >
      </el-tree>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">插入</el-button>
    </span>
  </el-dialog>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import { v4 as uuid } from 'uuid'
import { Message } from 'element-ui'
import { getFirstLevelOrgList, qryOrgListByParentOrgId, selectOrgTreeByCondition } from '@/api'

export default {
  name: 'DepartmentDialog',
  data() {
    return {
      searchKey: '',
      treeData: [],
      syncTreeVisible: false,
      dialogVisible: false
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
    },
    async filterNode() {
      if (this.searchKey) {
        this.treeData = []
        this.syncTreeVisible = true
        const data = await selectOrgTreeByCondition({ searchKey: this.searchKey, flag: 1 }, true)
        this.treeData = data
      } else {
        this.syncTreeVisible = false
      }
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return getFirstLevelOrgList().then(resolve)
      }
      if (node.data.isLeaf) {
        return resolve([])
      }
      const { orgId, orgCode } = node.data
      return qryOrgListByParentOrgId({ parentOrgId: orgId, parentOrgCode: orgCode }).then(resolve)
    },
    async handleConfirm() {
      const nodes = this.syncTreeVisible
        ? this.$refs.syncTree.getCheckedNodes()
        : this.$refs.asyncTree.getCheckedNodes()
      console.log(nodes)
      if (nodes.length) {
        // 插入
        tinymce.activeEditor.insertContent(
          nodes.reduce((acc, cur) => {
            return (
              acc +
              `<span
              class="noneditable"
              contenteditable="false"
              data-type="department"
              data-id="${uuid()}"
            >${cur.data.orgName}</span>`
            )
          }, '')
        )
        Message.success('插入成功')
        this.handleClose()
        return
      }

      Message.warning('请选择一个组织单位')
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
::v-deep .el-dialog__body {
  padding-top: 0;
  padding-bottom: 10px;
}
.wrapper {
  min-height: 400px;
  max-height: 600px;
  overflow: auto;
}
</style>
